/**
 *
 * @param {String} newValue:属性的新值
 * @param {String} attrsName:要改变属性名称
 */
type Po = {
  top: string;
  right: string;
  bottom: string;
  left: string;
};

type BoxShadow = {
  hShadow: string;
  vShadow: string;
  spread: string;
  blur: string;
  color: string;
};

interface State {
  aimDom: {
    style?: { [organName: string]: string };
    context?: { value: string };
    faPosition?: { top: number; left: number };
    [organName: string]: any;
  }; //目标DOM节点
  aimPath: {}[]; //目标路径
  aimAttrs: {
    context?: string;
    goto?: { type: string; value: string };
    [organName: string]: any;
  }; //目标属性
  aimBox: {} | null; //目标容器
  aimXY: {} | null; //鼠标与组件的偏移
  componentList: {};
  seniorBoxList: {};
  //为了可以显示margin...
  colorDomStyle: {
    width: string;
    height: string;
    top: string;
    left: string;
    padding: string;
    border: string;
    margin: string;
  };
  judgeColorDom: boolean;
  domStack: {}[]; //存储栈
  domStackNum: number; //存储栈控制下标
  page?: {
    tree: {
      [organName: string]: {};
    };
  };
}

interface Tree {
  tagName: string;
  attrs: {
    draggable: string;
    class: string;
    "data-type": string;
    [organName: string]: string;
  };
  style: {
    [organName: string]: string;
  };
  slot: string;
  goto: { type: string; value: string };
  context: { type: string; value: string };
  children: Tree[];
  faPosition?: [];
  on: {
    click: Function;
    [organName: string]: Function;
  };
}

export default function aimAttrsChange(
  state: State,
  {
    newValue,
    attrsName,
    that,
  }: {
    newValue: any;
    attrsName: string;
    that: {
      $searchDom: Function;
      $delete: Function;
      pageName: string;
      imgList: { src: string; blob: string }[];
    };
  }
) {
  let oldDom: {}; //旧dom节点数据，用于存储栈
  if (
    newValue == null ||
    newValue == undefined ||
    Object.keys(state.aimDom).length == 0
  )
    return;
  // if (state.judgeColorDom) return;

  oldDom = JSON.parse(JSON.stringify(state.aimDom));

  console.log(newValue, attrsName);

  if (!state.aimDom.style) state.aimDom.style = {};
  if (["width", "height", "borderRadius", "fontSize"].includes(attrsName)) {
    state.aimAttrs[attrsName] = newValue;
    state.aimDom.style[attrsName] = newValue + "px";
  } else if (
    [
      "marginTop",
      "marginBottom",
      "marginRight",
      "marginLeft",
      "paddingTop",
      "paddingBottom",
      "paddingRight",
      "paddingLeft",
    ].includes(attrsName)
  ) {
    let MorP = attrsName.startsWith("m") ? "margin" : "padding"; //判断是外边距还是内边距
    let bs = state.aimAttrs[MorP] as Po;
    let top = attrsName == `${MorP}Top` ? newValue : bs.top;
    let right = attrsName == `${MorP}Right` ? newValue : bs.right;
    let bottom = attrsName == `${MorP}Bottom` ? newValue : bs.bottom;
    let left = attrsName == `${MorP}Left` ? newValue : bs.left;
    state.aimAttrs[MorP] = {
      top,
      right,
      bottom,
      left,
    } as Po;
    state.aimDom.style[MorP] = `${top}px ${right}px ${bottom}px ${left}px`;
  } else if (
    [
      "backgroundColor",
      "color",
      "fontWeight",
      "opacity",
      "position",
      "justifyContent",
    ].includes(attrsName)
  ) {
    state.aimAttrs[attrsName] = newValue;
    state.aimDom.style[attrsName] = newValue as string;
  } else if (
    [
      "boxShadow-color",
      "boxShadow-hShadow",
      "boxShadow-vShadow",
      "boxShadow-blur",
      "boxShadow-spread",
    ].includes(attrsName)
  ) {
    let bs = state.aimAttrs.boxShadow as BoxShadow;
    let hShadow = attrsName == "boxShadow-hShadow" ? newValue : bs.hShadow;
    let vShadow = attrsName == "boxShadow-vShadow" ? newValue : bs.vShadow;
    let blur = attrsName == "boxShadow-blur" ? newValue : bs.blur;
    let spread = attrsName == "boxShadow-spread" ? newValue : bs.spread;
    let color = attrsName == "boxShadow-color" ? newValue : bs.color;
    state.aimAttrs.boxShadow = {
      hShadow,
      vShadow,
      blur,
      spread,
      color,
    };
    state.aimDom.style.boxShadow = `${hShadow}px ${vShadow}px ${blur}px ${spread}px ${color}`;
  } else if (attrsName == "borderWidth") {
    state.aimAttrs.border.width = newValue;
    state.aimDom.style.borderWidth = newValue + "px";
  } else if (attrsName == "borderColor") {
    state.aimAttrs.border.color = newValue;
    state.aimDom.style.borderColor = newValue as string;
  } else if (attrsName == "context") {
    state.aimAttrs.context = newValue as string;
    if (state.aimDom.context) state.aimDom.context.value = newValue as string;
  } else if (attrsName == "goto") {
    state.aimAttrs.goto = {
      type: newValue.type,
      value: newValue.value,
    };
    state.aimDom.goto = {
      type: newValue.type,
      value: newValue.value,
    };
  } else if (attrsName == "colWidth") {
    state.aimAttrs.colWidth[newValue[0]] = newValue[1];
    state.aimDom.children[newValue[0]].style.width = newValue[1] + "%";
  } else if (attrsName == "seniorBoxSize") {
    let size: any[] = [];

    (function changeValue(arr) {
      for (let index = 0; index < arr.length; index++) {
        const element = arr[index];
        if (element.attrs["data-type"] == "seniorBoxItem") {
          if (
            element.attrs.class[element.attrs.class.length - 1] ==
            newValue.index
          ) {
            if (element.style[newValue.type]) {
              element.style[newValue.type] = newValue.value + "%";
              return false;
            } else {
              return true;
            }
          }
        } else {
          changeValue(element.children) &&
            (element.style[newValue.type] = newValue.value + "%");
        }
      }
    })(state.aimDom.children);

    (function searchWidth(arr, fa) {
      arr.forEach((item: any) => {
        if (item.attrs["data-type"] == "seniorBoxItem") {
          if (item.style.width) {
            size[item.attrs.class[item.attrs.class.length - 1]] = {
              height: fa,
              width: item.style.width.slice(0, -1),
            };
          } else {
            size[item.attrs.class[item.attrs.class.length - 1]] = {
              width: fa,
              height: item.style.height.slice(0, -1),
            };
          }
        } else {
          searchWidth(
            item.children,
            item.style.width
              ? item.style.width.slice(0, -1)
              : item.style.height.slice(0, -1)
          );
        }
      });
    })(state.aimDom.children, "100");
    state.aimAttrs.seniorBoxSize.size = size;
  } else if (attrsName == "sort") {
    let tree = state.page?.tree[that.pageName];
    // if (newValue.type == "up") {
    //   let obj = tree[newValue.value];
    //   tree[newValue.value] = tree[newValue.value - 1];
    //   tree[newValue.value - 1] = tree[obj];

    //   // [tree[newValue.value], tree[newValue.value - 1]] = [
    //   //   tree[newValue.value - 1],
    //   //   tree[newValue.value],
    //   // ];
    //   state.aimAttrs.sort = newValue.value - 1;
    // } else {
    //   let obj = tree[newValue.value];
    //   tree[newValue.value] = tree[newValue.value + 1];
    //   tree[newValue.value + 1] = tree[obj];
    //   state.aimAttrs.sort = newValue.value + 1;
    // }

    state.domStackNum += 1;
    state.domStack.splice(state.domStackNum);
    state.domStack.push({
      type: "sortChange",
      pageName: that.pageName,
      path: state.aimPath,
      data: [newValue.value, newValue.type],
    });
    return;
  } else if (attrsName == "imageUrl") {
    state.aimDom.attrs.src = newValue.blob;
    that.imgList[state.aimDom.attrs.class] = {
      src: newValue.src,
      blob: newValue.blob,
    };
  }

  state.domStackNum += 1;
  state.domStack.splice(state.domStackNum);
  state.domStack.push({
    type: "attrsChange",
    pageName: that.pageName,
    path: state.aimPath,
    data: [oldDom, JSON.parse(JSON.stringify(state.aimDom))],
  });
}

// any还没有完成
